<!-- <link rel="stylesheet" href="../src/directives/tms-carRecommend/tms-carRecommend.css" type="text/css"> -->
 

<div id='tms-car-recommend-content'>
    
    <div class="tcr-click-before" ng-if="showLogo">
        <img src="./src/img/tcr-logo.png" alt="" ng-click="loadTable()">
    </div>

    
    
    <div class="tcr-click-after panel panel-default" ng-if="showLoadding||showTab||showFail">
        
        <div class="panel-heading" >调车推荐</div>
        
        <table  class="table " ng-show="showTab" >
            <tr class="tcr-tr"><th><span title="车辆类型有栏板车、高栏车、厢式货车、自卸车、平板车、其他">?&nbsp;</span> 车辆类型</th><th>车长</th><th>载重</th><th>距离发货市</th><th>联系电话</th><th>联系人</th></tr>
            <tr ng-repeat="item in carList">
                
                <td>{{item.carType}}<span class="carDetail" data-toggle="modal" ng-click="getDetail(item)" data-target="#redommendCarDetail"><i class="fa fa-info-circle"></i></span></td>
                <td>{{item.carLength}}</td><td>{{item.ratifyLoad}}</td><td>{{item.dist}}</td>
                <td>{{item.phone}} <button ng-if="!item.phone" class="btn btn-default" ng-click="getPhone(item)"> 查看</button></button> </td><td>{{item.name}}</td>
            </tr>
        </table>
        <div class="tcr-loadding" ng-if="showLoadding">
            <div style="width:252px">{{loaddingText}}</div>
        </div>
        <div class="tcr-fail" ng-if="showFail">
            <div>加载失败</div>
        </div>
        <div class="panel-footer">
            <!-- this is panel-footing -->
            <div class="tcr-icon">
                <img ng-click="hideTable()" src="./src/img/tcr-join.png" alt="">
                <img ng-click="refresh()" src="./src/img/tcr-refresh.png" alt="">
            </div>
            <div class="tcr-pagination" ng-if="showTab">
                <span class="pg_first" ng-click="toFirst()" ng-class="{tcrDisabled:currentPage==1}"><i class="fa fa-step-backward"></i></span>
                <span class="pg_first" ng-click="toPrev()" ng-class="{tcrDisabled:currentPage==1}"><i class="fa fa-chevron-left"></i></span>
                <input id="tcr_current_page" name="tcr-current-page" type="text" ng-model="currentPage" ng-change="handleIpt()" class="pg-ipt">
                <label>/{{totalPage}}</label>
                <span class="pg_first" ng-click="toNext()" ng-class="{tcrDisabled:currentPage==totalPage}"><i class="fa fa-chevron-right"></i></span>
                <span class="pg_first" ng-click="toLast()" ng-class="{tcrDisabled:currentPage==totalPage}"><i class="fa fa-step-forward"></i></span>
            </div>
        </div>
                 
    </div>
</div>

<div class="modal modal-modal-lg fade bs-example-modal-lg" style="z-index:1061" id="redommendCarDetail" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog ">
        <div class="modal-content">
            <div class="modal-header">
                <button id="clientInfo_model" type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">车辆详情</h4>
            </div>

            <div class="modal-body">
                <div  style="width:500px;margin:0 auto" ng-if="selectedCar">
                    <img width="500px"  src="{{selectedCar.carImg}}">
                    <div class="tcr_caption">
                        <div ><span>车牌号&nbsp;&nbsp;{{selectedCar.carCode}} </span>
                        <div>车辆位置 &nbsp;&nbsp;{{selectedCar.address}}</div>
                        <div>最后位置更新时间&nbsp;&nbsp;{{selectedCar.positionDateTime}}</div>
                    </div>
                </div>
            </div>


        </div>
    </div>
</div>
<style>
    #tms-car-recommend-content .panel-heading,.panel-footer{
    background-color: #1d2b36;
    color: #8c9fad;
}
#tms-car-recommend-content .panel-footer{
    overflow: auto
}
#tms-car-recommend-content .panel-heading{
    font-family: 微软雅黑
}
#tms-car-recommend-content{
    z-index: 1060;
    background-color: #1d2b36;
    position: fixed;
    top: 50px;
    right: 0px;
}
#tms-car-recommend-content img{
    cursor: pointer;
}

#tms-car-recommend-content .carDetail{
    cursor: pointer;
}
.tcr-click-after{
    margin-bottom: 0px;
    width: 800px;
}
.pg-ipt{
    width:40px;
    border-radius: 2px;
    text-align: center;
    border: 1px solid #8c9fad;
    background-color: #1d2b36;

}

.tcr-tr{
    background-color: #8c9fad
}
.tcr-icon{
    float: left;
}
.tcr-pagination{
    float: right;
}
.tcr-pagination span{
    border: 1px solid #8c9fad;
    display: inline-block;
    padding: 1px 0px;
    border-radius: 2px;
    width: 22px;
    /* height: 22px; */
    text-align: center;
    cursor: pointer;
}
.tcr-pagination  .tcrDisabled{
    cursor:not-allowed
}
.tcr-loadding,.tcr-fail{
    height: 448px;
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}
.tcr-loadding div{
    font-size: 36px;
    color: #23B7e5;

}
.tcr-fail div{
    font-size: 36px;
    color: #cc0000;

}
.tcr_caption{
    line-height: 32px;
    font-size: 16px;
}
.tcr-click-before img{
    width: 40px;
}
</style>
    
